<template>
  <view class="health-questionnaire-suggestion section-h">
    <page-header />
    <view class="tabs-wrapper section-v">
      <swiper
        class="tabSwiper"
        indicatorDots
        circular
        :displayMultipleItems="
          currentActiveIndex === itemsTitle.length - 1 ? 1 : 1.5
        "
        :current="currentActiveIndex"
        @change="onIndexChange"
      >
        <swiper-item
          class="tabSwiperItem"
          v-for="(tab, index) in itemsTitle"
          :key="tab.title"
        >
          <view
            class="tabs"
            :class="{ 'tabs--active': currentActiveIndex === index }"
            @tap="changeTab(index)"
          >
            {{ tab.title }}
          </view>
        </swiper-item>
      </swiper>
    </view>
    <swiper
      v-if="report.nutritionPlan"
      :current="currentActiveIndex"
      @change="onIndexChange"
    >
      <swiper-item>
        <health-check-in :healthCheckIn="report.healthCheckIn" />
      </swiper-item>
      <swiper-item>
        <nutrition-plan :nutritionPlan="report.nutritionPlan" />
      </swiper-item>
      <swiper-item>
        <regiment-plan :regimentPlan="report.regimentPlan" />
      </swiper-item>
      <swiper-item>
        <food-plan :foodPlan="report.foodPlan" />
      </swiper-item>
      <swiper-item>
        <sports-plan :sportsPlan="report.sportsPlan" />
      </swiper-item>
      <swiper-item>
        <drink-water />
      </swiper-item>
      <swiper-item>
        <music-healing :musicPlan="report.musicPlan" />
      </swiper-item>
      <swiper-item>
        <reference-basis
          :reference="report.healthManagement"
          @showDialog="maskDialog = !maskDialog"
        />
      </swiper-item>
      <swiper-item>
        <health-management-service :healthData="report.reference" />
      </swiper-item>
    </swiper>
    <view v-if="maskDialog" class="reference-basis-mask-dialog">
      <view class="reference-basis-footer">
        <view class="reference-basis-footer-title"
          >您的
          <text>{{ report.reportName }}</text>
          已经保存
        </view>
        <view class="reference-basis-footer-sub-title"
          >后续可前往“
          <text>个人中心-我的健康管理方案</text>
          ”查阅
        </view>
        <button
          class="button-plain-purple"
          type="fill"
          @tap="maskDialog = false"
        >
          我知道了
        </button>
      </view>
    </view>
    <HomeFab />
  </view>
</template>

<script lang="ts">
import Taro from "@tarojs/taro";
import * as repostService from "../../../services/report-service";
import PageHeader from "../../../common-components/page-header/index.vue";
import HealthCheckIn from "./suggestion-items/health-check-in/index.vue";
import NutritionPlan from "./suggestion-items/nutrition-plan/index.vue";
import RegimentPlan from "./suggestion-items/regimen-plan/index.vue";
import FoodPlan from "./suggestion-items/food-plan/index.vue";
import SportsPlan from "./suggestion-items/sports-plan/index.vue";
import DrinkWater from "./suggestion-items/drink-water/index.vue";
import MusicHealing from "./suggestion-items/music-healing/index.vue";
import ReferenceBasis from "./suggestion-items/reference-basis/index.vue";
import HealthManagementService from "./suggestion-items/health-management-service/index.vue";
import HomeFab from "../../../common-components/fab/index.vue";

export default {
  components: {
    PageHeader,
    HealthCheckIn,
    NutritionPlan,
    RegimentPlan,
    FoodPlan,
    SportsPlan,
    DrinkWater,
    MusicHealing,
    ReferenceBasis,
    HealthManagementService,
    HomeFab,
  },
  data() {
    return {
      maskDialog: false,
      report: {
        result: "", // 报告正文
        title: "", // 报告标题
        type: "",
        pageId: 0, // 生成报告的问卷 ID
        id: 0, // 报告 ID
        nutritionPlan: null,
      },
      itemsTitle: [
        {
          title: "健康打卡",
        },
        {
          title: "营养素补充方案",
        },
        {
          title: "中医养生方案",
        },
        {
          title: "膳食方案",
        },
        {
          title: "运动方案",
        },
        {
          title: "饮水方案",
        },
        {
          title: "音乐疗愈方案",
        },
        {
          title: "参考依据",
        },
        {
          title: "健康管理服务",
        },
      ],
      currentActiveIndex: 0,
    };
  },
  methods: {
    onIndexChange(e) {
      this.currentActiveIndex = e.detail.current;
    },
    changeTab(activeIndex) {
      this.currentActiveIndex = activeIndex;
    },
    goHome() {
      Taro.navigateTo({ url: "/pages/index/index" });
    },
  },
  async created() {
    const pageId = Taro.getCurrentInstance().router.params.pageId;
    const result = await repostService.getReportByQuestionnaireId(pageId);
    this.report = result.data.data.details;
  },
};
</script>

<style lang="less">
@import "src/styles/colors";
@import "src/styles/size";
@import "./index.less";
</style>
<style lang="scss">
@import "~taro-ui-vue/dist/style/components/fab.scss";
</style>
